<template>
  <div>
    <div class="chart-wrapper chart-tab">
      <van-cell title="产业分布占比" />
      <van-tabs type="card" @click="tabsChange" animated>
        <van-tab title="今年">
          <canvas id="chanyejiegoufenxi"></canvas>
        </van-tab>
        <van-tab title="去年">
          <canvas id="qunianchanyejiegoufenxi"></canvas>
        </van-tab>
      </van-tabs>
    </div>
    <div class="chart-wrapper chart-tab">
      <!-- <van-cell to="industrialTable" title="行业分类占比" is-link /> -->
      <van-cell title="行业分类占比" />
      <van-tabs type="card" @click="tabsChange2" animated>
        <van-tab title="今年">
          <canvas id="hangyemenleizhanbi"></canvas>
        </van-tab>
        <van-tab title="去年">
          <canvas id="qunianhangyemenleizhanbi"></canvas>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
function f2Init1() {
  var data = [
    {
      name: "股票类",
      percent: 83.59,
      a: "1",
    },
    {
      name: "债券类",
      percent: 2.17,
      a: "1",
    },
    {
      name: "现金类",
      percent: 14.24,
      a: "1",
    },
  ];

  var map = {};
  data.map(function (obj) {
    map[obj.name] = obj.percent + "%";
  });

  var chart = new F2.Chart({
    id: "mountNode1",
    pixelRatio: window.devicePixelRatio,
    padding: [10, "auto", 40],
  });
  chart.source(data, {
    percent: {
      formatter: function formatter(val) {
        return val + "%";
      },
    },
  });
  chart.tooltip(false);
  chart.legend({
    position: "bottom",
    itemFormatter: function itemFormatter(val) {
      return val + "    " + map[val];
    },
  });
  chart.coord("polar", {
    transposed: true,
    innerRadius: 0.7,
    radius: 0.85,
  });
  chart.axis(false);
  chart
    .interval()
    .position("a*percent")
    .color("name", ["#FE5D4D", "#3BA4FF", "#737DDE"])
    .adjust("stack");

  chart.guide().html({
    position: ["50%", "45%"],
    html:
      '<div style="width: 250px;height: 40px;text-align: center;">' +
      '<div style="font-size: 16px">总资产</div>' +
      '<div style="font-size: 24px">133.08 亿</div>' +
      "</div>",
  });
  chart.render();
}
function f2Init2() {
  var data = [
    {
      name: "股票类",
      percent: 53.59,
      a: "1",
    },
    {
      name: "债券类",
      percent: 12.17,
      a: "1",
    },
    {
      name: "现金类",
      percent: 34.24,
      a: "1",
    },
  ];

  var map = {};
  data.map(function (obj) {
    map[obj.name] = obj.percent + "%";
  });

  var chart = new F2.Chart({
    id: "mountNode2",
    pixelRatio: window.devicePixelRatio,
    padding: [10, "auto", 40],
  });
  chart.source(data, {
    percent: {
      formatter: function formatter(val) {
        return val + "%";
      },
    },
  });
  chart.tooltip(false);
  chart.legend({
    position: "bottom",
    itemFormatter: function itemFormatter(val) {
      return val + "    " + map[val];
    },
  });
  chart.coord("polar", {
    transposed: true,
    innerRadius: 0.7,
    radius: 0.85,
  });
  chart.axis(false);
  chart
    .interval()
    .position("a*percent")
    .color("name", ["#FE5D4D", "#3BA4FF", "#737DDE"])
    .adjust("stack");

  chart.guide().html({
    position: ["50%", "45%"],
    html:
      '<div style="width: 250px;height: 40px;text-align: center;">' +
      '<div style="font-size: 16px">总资产</div>' +
      '<div style="font-size: 24px">133.08 亿</div>' +
      "</div>",
  });
  chart.render();
}
var data1 = [
      {
        name: "数字经济",
        percent: 32,
        a: "1",
      },
      {
        name: "文化创意",
        percent: 23,
        a: "1",
      },
      {
        name: "高端制造",
        percent: 6,
        a: "1",
      },
      {
        name: "时尚行业",
        percent: 7,
        a: "1",
      },
      {
        name: "金融服务",
        percent: 7,
        a: "1",
      },
      {
        name: "休闲旅游",
        percent: 3,
        a: "1",
      },
      {
        name: "生物健康",
        percent: 12,
        a: "1",
      },
      {
        name: "其他",
        percent: 10,
        a: "1",
      },
    ];
    var data2 = [
      {
        name: "制造业",
        percent: 11,
        a: "1",
      },
      {
        name: "建筑业",
        percent: 8,
        a: "1",
      },
      {
        name: "批发零售",
        percent: 5,
        a: "1",
      },
      {
        name: "交通运输",
        percent: 10,
        a: "1",
      },
      {
        name: "金融业",
        percent: 18,
        a: "1",
      },
      {
        name: "住宿餐饮",
        percent: 14,
        a: "1",
      },
      {
        name: "教育",
        percent: 12,
        a: "1",
      },
      {
        name: "信息技术服务",
        percent: 23,
        a: "1",
      },
    ];
import { chanyejiegoufenxi } from "../../assets/js/f2.js";

export default {
  data() {
    return {
      lastYearFlag:0,
      lastYearFlag1:0
    };
  },
  created() {},
  mounted() {
    // chanyejiegoufenxi("chanyejiegoufenxi", data1);
    // chanyejiegoufenxi("hangyemenleizhanbi", data2);
    // f2Init1();
    // f2Init2();
    this.getCYFBZB()
    this.getHYFLZB()
  },
  methods: {
    // 产业分布占比
    getCYFBZB() {
      this.$api.appChartsApi({ type: "getCYFBZB" }).then((res) => {
        let chartData = [];
        res.data.data.num.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("chanyejiegoufenxi", chartData);
      });
    },
    // 切换去年今年
    tabsChange(name, title) {
      if (!name || this.lastYearFlag) return;
      this.$api.appChartsApi({ type: "getCYFBZB" }).then((res) => {
        this.lastYearFlag++;
        let chartData = [];
        res.data.data.lastYear.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("qunianchanyejiegoufenxi", chartData);
      });
    },
    tabsChange2(name, title) {
      if (!name || this.lastYearFlag1) return;
      this.$api.appChartsApi({ type: "getHYFLZB" }).then((res) => {
        this.lastYearFlag1++;
        let chartData = [];
        res.data.data.lastYear.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("qunianhangyemenleizhanbi", chartData);
      });
    },
    // 行业分布占比
    getHYFLZB() {
      this.$api.appChartsApi({ type: "getHYFLZB" }).then((res) => {
        let chartData = [];
        res.data.data.thisYear.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("hangyemenleizhanbi", chartData);
      });
    },
  },
};
</script>

<style scoped lang="less">
.chart-wrapper {
  width: cale(100% - 20px);
  height: 300px;
  margin: 10px 20px 65px;
}
.chart-wrapper canvas {
  width: 100%;
  height: 100%;
}
canvas {
  background: #fff;
  padding-bottom: 10px;
}
.chart-big {
  height: 450px;
}
.chart-tab{
  height: 490px;
}
.van-tabs--card {
  background: #fff;
}
.van-tab__pane,
.van-tabs__content,
.van-tab__pane-wrapper {
  height: 470px;
}
.chart-wrapper /deep/ .van-tabs__nav--card {
  border-color: #49a9ee;
}
.van-tab__pane-wrapper /deep/ .van-tab__pane {
  height: 460px;
}
.chart-wrapper /deep/ .van-tab {
  color: #49a9ee;
  border-color: #49a9ee;
}
.chart-wrapper /deep/ .van-tab--active {
  background: #49a9ee;
  color: #fff;
}
</style>
